import { PageContainer } from '@ant-design/pro-layout';
import { Avatar, Skeleton, Statistic } from 'antd';
import type { FC } from 'react';
import React from 'react';
import { useModel } from 'umi';
import type { CurrentUser } from './data';
import styles from './index.less';

const PageHeaderContent: FC<{ currentUser: Partial<CurrentUser> }> = ({ currentUser }) => {
  const loading = currentUser && Object.keys(currentUser).length;
  if (!loading) {
    return <Skeleton avatar paragraph={{ rows: 1 }} active />;
  }

  return (
    <div className={styles.pageHeaderContent}>
      <div className={styles.avatar}>
        <Avatar size="large" src={currentUser.avatar} />
      </div>
      <div className={styles.content}>
        <div className={styles.contentTitle}>
          早安，
          {currentUser.name}
          ，祝你开心每一天！
        </div>
        <div>
          {currentUser.title} | {currentUser.group}
        </div>
      </div>
    </div>
  );
};

const ExtraContent: FC<Record<string, any>> = () => (
  <div className={styles.extraContent}>
    <div className={styles.statItem}>
      <Statistic title="项目数" value={666} />
    </div>
    <div className={styles.statItem}>
      <Statistic title="团队内排名" value={1} suffix="/ 24" />
    </div>
    <div className={styles.statItem}>
      <Statistic title="项目访问" value={100000} />
    </div>
  </div>
);

export default (): React.ReactNode => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { avatar, nickname: name, id: userId } = initialState?.currentUser;
  return (
    <PageContainer
      content={
        <PageHeaderContent
          currentUser={{
            avatar: avatar,
            name: name,
            userId: userId,
            email: '',
            signature: '海纳百川，有容乃大',
            title: '前端专家',
            group: '遐享－又享聚平台部－前端技术部－UED',
          }}
        />
      }
      extraContent={<ExtraContent />}
    />
  );
};
